/**
 * @file
 * Styling for Settings Tray module.
 */

/* Position the offcanvas tray container outside the right of the viewport. */
.ui-dialog-offcanvas {
  box-sizing: border-box;
  height: 100%;
  overflow: visible;
}

/* Shift the main canvas to the right for right-to-left languages. */
[dir="rtl"] #main-canvas-wrapper.js-tray-open #main-canvas {
  right: 0;
}


/* Wrap the form that's inside the offcanvas tray. */
.ui-dialog-offcanvas .ui-dialog-content {
  padding: 0 20px;
  /* Prevent horizontal scrollbar. */
  overflow-x: hidden;
  overflow-y: auto;
}
[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
  text-align: right;
}

/*
 * Position the edit toolbar tab.
 * @todo Move changes into contextual module when Settings Tray is not
 *   experimental: https://www.drupal.org/node/2784591.
 */
.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
  float: left;
}
[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
  float: right;
}

.offcanvas-lining {
  background: #333;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
